<template>
  <div class="app-container">
    <avue-crud
      v-show="!showForm"
      ref="crud"
      v-model="form"
      :data="data"
      :option="option"
      :page.sync="page"
      :search.sync="search"
      :before-open="beforeOpen"
      @row-del="rowDel"
      @size-change="sizeChange"
      @current-change="currentChange"
      @refresh-change="refreshChange"
      @on-load="onLoad"
      @search-reset="searchChange"
      @search-change="searchChange"
    >
      <template slot="publish" slot-scope="scope">
        <avue-switch
          v-model="scope.row.publish"
          active-color="#13ce66"
          inactive-color="#E6A23C"
          :dic="scope.dic"
          @click="publishChange($event, scope)"
        />
      </template>
      <template slot="status" slot-scope="scope">
        <avue-switch
          v-model="scope.row.status"
          active-color="#13ce66"
          inactive-color="#ff4949"
          :dic="scope.dic"
          @click="statusChange($event, scope)"
        />
      </template>
    </avue-crud>
    <ArticleForm v-show="showForm" :form-prop="form" :type-prop="formType" @hide="ArticleFormHide" @submitHandle="ArticleFormSubmit" />
  </div>
</template>

<script>
import {
  getList,
  del,
  publishOn,
  publishOff,
  statusOff,
  statusOn
} from '@/api/operation/article';
import DIC from '@/config/dicData';
import ArticleForm from './ArticleForm';

export default {
  components: {
    ArticleForm
  },
  data() {
    return {
      formType: '',
      showForm: false,
      imgURL: '',
      fullURL: '',
      page: {
        currentPage: 0,
        pageSize: 10
      },
      search: {},
      form: {},
      data: [],
      loading: false,
      option: {
        title: '文章',
        align: 'center',
        menuAlign: 'center',
        viewBtn: true,
        columnBtn: false,
        index: true,
        defaultSort: {
          prop: 'sort',
          order: 'ascending'
        },
        column: [
          {
            label: '标题',
            prop: 'title',
            search: true,
            rules: [
              {
                required: true,
                message: '请输入标题',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '作者',
            prop: 'author',
            search: true,
            rules: [
              {
                required: true,
                message: '请输入作者名称',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '封面',
            prop: 'coverUrl',
            type: 'img',
            span: 24,
            alone: true
          },
          {
            label: '更新日期',
            prop: 'updateTime',
            type: 'date',
            format: 'yyyy-MM-dd HH:mm:ss',
            addDisplay: false,
            editDisplay: false,
            sortable: true,
            readonly: true
          },
          {
            label: '发布状态',
            prop: 'publish',
            type: 'switch',
            value: 0,
            slot: true,
            search: true,
            dicData: DIC.article_publish
          },
          {
            label: '审核状态',
            prop: 'status',
            type: 'switch',
            value: 0,
            slot: true,
            search: true,
            dicData: DIC.article_status
          },
          {
            label: '排序',
            prop: 'sort',
            value: 1,
            type: 'number',
            sortable: true
          },
          {
            label: '文章内容',
            prop: 'content',
            span: 24,
            showColumn: false
          }
        ]
      }
    };
  },
  methods: {
    onLoad(page) {
      this.loading = true;
      const pageNum = this.page.currentPage;
      const pageSize = this.page.pageSize;
      const payload = Object.assign({}, this.search);
      getList(pageNum, pageSize, payload).then(res => {
        const data = res.data;
        this.loading = false;
        this.page.total = data.total;
        const result = data.rows;
        this.data = result;
      });
    },
    sizeChange(val) {
      this.page.currentPage = 1;
      this.page.pageSize = val;
      this.onLoad();
    },
    currentChange(val) {
      this.page.currentPage = val;
      this.onLoad();
    },
    refreshChange() {
      this.onLoad();
      this.$message.success('刷新成功');
    },
    rowDel(row, index) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          return del(row.id);
        })
        .then(() => {
          this.$message.success('删除成功');
          this.onLoad();
        });
    },
    // 发布开关
    publishChange(value, scope) {
      if (scope.row.status === 0) {
        scope.row.publish = 0;
        return this.$message.warning('发布文章需先通过审核');
      }
      if (value === 0) {
        publishOff(scope.row.id).then(res => {
          this.$message.success('操作成功');
        });
      } else {
        publishOn(scope.row.id).then(res => {
          this.$message.success('操作成功');
        });
      }
    },
    // 审核开关
    statusChange(value, scope) {
      if (value === 0) {
        // 取消审核同时取消发布
        scope.row.publish = 0;
        statusOff(scope.row.id).then(res => {
          publishOff(scope.row.id);
          this.$message.success('操作成功');
        });
      } else {
        statusOn(scope.row.id).then(res => {
          this.$message.success('操作成功');
        });
      }
    },
    searchChange(params, done) {
      if (done) done();
      this.search = params;
      this.page.currentPage = 1;
      this.onLoad();
      this.$message.success('搜索成功');
    },
    beforeOpen(done, type) {
      this.formType = type;
      this.showForm = true;
    },
    ArticleFormSubmit() {
      this.showForm = false;
      this.onLoad();
    },
    ArticleFormHide() {
      this.showForm = false;
    }
  }
};
</script>
